function ResizeHandler(node, props) {
	
	this.node = node;
	this.props = props;
	var radius = props.radius;
	
	function update(activeAnchor) {
		
		var topLeft = node.get(".topLeft")[0];
		var topRight = node.get(".topRight")[0];
		var bottomRight = node.get(".bottomRight")[0];
		var bottomLeft = node.get(".bottomLeft")[0];
		var midTop = node.get(".midTop")[0];
		var midBottom = node.get(".midBottom")[0];
		var midLeft = node.get(".midLeft")[0];
		var midRight = node.get(".midRight")[0];
		
		var object = node.getChildren('#' + props.id)[0];
		// update anchor positions
		switch (activeAnchor.getName()) {
		case "topLeft":
			topRight.attrs.y = activeAnchor.attrs.y;
			bottomLeft.attrs.x = activeAnchor.attrs.x;
			
			midTop.attrs.y = activeAnchor.attrs.y;
			midLeft.attrs.x = activeAnchor.attrs.x;
			break;
		case "topRight":
			topLeft.attrs.y = activeAnchor.attrs.y;
			bottomRight.attrs.x = activeAnchor.attrs.x;
			
			midTop.attrs.y = activeAnchor.attrs.y;
			midRight.attrs.x = activeAnchor.attrs.x;
			break;
		case "bottomRight":
			bottomLeft.attrs.y = activeAnchor.attrs.y;
			topRight.attrs.x = activeAnchor.attrs.x;
			
			midBottom.attrs.y = activeAnchor.attrs.y;
			midRight.attrs.x = activeAnchor.attrs.x;
			break;
		case "bottomLeft":
			bottomRight.attrs.y = activeAnchor.attrs.y;
			topLeft.attrs.x = activeAnchor.attrs.x;
			
			midBottom.attrs.y = activeAnchor.attrs.y;
			midLeft.attrs.x = activeAnchor.attrs.x;
			break;
		case "midTop":
			topRight.attrs.y = activeAnchor.attrs.y;
			topLeft.attrs.y = activeAnchor.attrs.y;
			break;
		case "midBottom":
			bottomRight.attrs.y = activeAnchor.attrs.y;
			bottomLeft.attrs.y = activeAnchor.attrs.y;
			break;
		case "midLeft":
			topLeft.attrs.x = activeAnchor.attrs.x;
			bottomLeft.attrs.x = activeAnchor.attrs.x;
			break;
		case "midRight":
			topRight.attrs.x = activeAnchor.attrs.x;
			bottomRight.attrs.x = activeAnchor.attrs.x;
			break;	
		
		}

		object.setPosition(topLeft.attrs.x, topLeft.attrs.y);

		// Update size
		//
		var width = topRight.attrs.x - topLeft.attrs.x;
		var height = bottomLeft.attrs.y - topLeft.attrs.y;
		// Update the mid anchor position
		midTop.attrs.x = topLeft.attrs.x + width / 2 - props.radius / 2;
		midBottom.attrs.x = topLeft.attrs.x + width / 2 - props.radius / 2;
		
		midLeft.attrs.y = topLeft.attrs.y + height / 2 - props.radius / 2;
		midRight.attrs.y = topLeft.attrs.y + height / 2 - props.radius / 2;
		
		// Update the size of object
		if(width && height) {
			object.setSize(width, height);
		}
		
		
	}
	  
	function addAnchor(x, y, name, r) {
		
		var layer = node.getLayer();
		
		var anchor = new Kinetic.Circle({
			x: x,
			y: y,
			stroke: "#666",
			fill: "#ddd",
			strokeWidth: 2,
			radius: r,
			name: name,
			draggable: true
		});

		// Add verticle drag for mid anchor
		if(name.indexOf("midTop") != -1 || name.indexOf("midBottom") != -1) {
			anchor.setDragBoundFunc(function(pos) {
				return {
					x: this.getAbsolutePosition().x,
					y: pos.y
				}
			});
		}
		
		if(name.indexOf("midLeft") != -1 || name.indexOf("midRight") != -1) {
			anchor.setDragBoundFunc(function(pos) {
				return {
					x: pos.x,
					y: this.getAbsolutePosition().y
				}
			});
		}
		
		anchor.on("dragmove", function() {
			
			update(this);
			layer.draw();
		});
		
		anchor.on("mousedown touchstart", function() {
			node.setDraggable(false);
			this.moveToTop();
		});
		
		anchor.on("dragend", function() {
			node.setDraggable(true);
			layer.draw();
		});
		// add hover styling
		anchor.on("mouseover", function() {
			var layer = this.getLayer();
			
			// Set cursor
			switch (name) {
			case "topLeft":
				document.body.style.cursor = "nw-resize";
				break;
			case "topRight":
				document.body.style.cursor = "ne-resize";
				break;
			case "bottomRight":
				document.body.style.cursor = "se-resize";
				break;
			case "bottomLeft":
				document.body.style.cursor = "sw-resize";
				break;
			case "midTop":
				document.body.style.cursor = "n-resize";
				break;
			case "midBottom":
				document.body.style.cursor = "s-resize";
				break;
			case "midLeft":
				document.body.style.cursor = "w-resize";
				break;
			case "midRight":
				document.body.style.cursor = "e-resize";
				break;
			}

			
			
			this.setStrokeWidth(4);
			layer.draw();
		});
		anchor.on("mouseout", function() {
			var layer = this.getLayer();
			document.body.style.cursor = "default";
			this.setStrokeWidth(2);
			layer.draw();
		});

		node.add(anchor);
		node.draw();
	}

	this.show = function() {
		// Get all anchor
		var topLeft = node.get(".topLeft")[0];
		
		if(topLeft == null) {
			var position = node.getChildren('#' + this.props.id)[0].getPosition();
			var size = node.getChildren('#' + this.props.id)[0].getSize();
			
			addAnchor(position.x - radius, 					position.y - radius, 				"topLeft", 		radius);
			addAnchor(position.x + size.width + radius, 	position.y - radius, 				"topRight",		radius);
			addAnchor(position.x + size.width + radius, 	position.y + size.height + radius, 	"bottomRight",	radius);
			addAnchor(position.x - radius, 					position.y + size.height + radius, 	"bottomLeft",	radius);
			addAnchor(position.x + size.width/2 + radius/2, position.y - radius, 				"midTop", 		radius);
			addAnchor(position.x + size.width/2 + radius/2, position.y + size.height + radius, 	"midBottom", 	radius);
			addAnchor(position.x - radius , position.y + size.height / 2 + radius / 2, 				"midLeft", 		radius);
			addAnchor(position.x + size.width + radius, position.y + size.height / 2 + radius / 2, 	"midRight", 	radius);
			
			topLeft = node.get(".topLeft")[0];
		}
		
		var topRight = node.get(".topRight")[0];
		var bottomRight = node.get(".bottomRight")[0];
		var bottomLeft = node.get(".bottomLeft")[0];
		var midTop = node.get(".midTop")[0];
		var midBottom = node.get(".midBottom")[0];
		var midLeft = node.get(".midLeft")[0];
		var midRight = node.get(".midRight")[0];
		
		// Update position of anchor
		update(topLeft);
		
		// Show
		topLeft.show();
		topRight.show();
		bottomRight.show();
		bottomLeft.show();
		midTop.show();
		midBottom.show();
		midLeft.show();
		midRight.show();
		
		this.node.draw();
	}
	
	this.hide = function() {
		// Get all anchor
		var topLeft = node.get(".topLeft")[0];
		var topRight = node.get(".topRight")[0];
		var bottomRight = node.get(".bottomRight")[0];
		var bottomLeft = node.get(".bottomLeft")[0];
		var midTop = node.get(".midTop")[0];
		var midBottom = node.get(".midBottom")[0];
		var midLeft = node.get(".midLeft")[0];
		var midRight = node.get(".midRight")[0];
		
		// Show
		topLeft.hide();
		topRight.hide();
		bottomRight.hide();
		bottomLeft.hide();
		midTop.hide();
		midBottom.hide();
		midLeft.hide();
		midRight.hide();
		
		this.node.draw();
	}
}

